<template>
  <div class="home">
    <div class="toper">
      <p>小区管理</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>社区管理</el-breadcrumb-item>
        <el-breadcrumb-item>小区管理</el-breadcrumb-item>
        <el-breadcrumb-item>小区列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box">
      <div class="headerECharts">
        <div id="myChart" ref="bin"></div>
        <div id="binChart" ref="BC"></div>
      </div>
      <div class="header">
        <el-input placeholder="小区编码" v-model="id" clearable> </el-input>
        <el-input placeholder="小区名称" v-model="name" clearable> </el-input>
        <el-button
          style="background-color: #0bb197"
          type="success"
          icon="el-icon-search"
          @click="search"
          >查询</el-button
        >
        <el-button type="" icon="el-icon-refresh" class="reset" @click="reset"
          >重置</el-button
        >
      </div>
      <div class="body">
        <div class="bodyHeader">
          <p>查询结果列表</p>
          <el-button
            style="background-color: #0bb197"
            type="success"
            @click="addDialog = true"
            >新增</el-button
          >
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="comNum" label="小区编号">
          </el-table-column>
          <el-table-column align="center" prop="comName" label="小区名称">
          </el-table-column>
          <el-table-column align="center" prop="comAddress" label="详细地址">
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                style="color: #0bb197"
                type="text"
                @click="handleEdit(scope.row), (editDialog = true)"
                >编辑</el-button
              >
              <el-button
                style="color: #0bb197"
                type="text"
                @click="deleteRow(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <Page @sizeChange="fn1" @pageChange="fn" :data="{count,total}"></Page>

        <!-- 新增的弹出框 -->
        <el-dialog title="新增小区" :visible.sync="addDialog">
          <el-form :model="addData">
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="小区编号"
              >
                <el-input
                  v-model="addData.comNum"
                  autocomplete="off"
                  placeholder="例如：KL2019"
                  @blur="blurFn"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="小区名称">
                <el-input
                  v-model="addData.comName"
                  autocomplete="off"
                  placeholder="例如：恐龙小区"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item label="详细地址">
              <el-input
                v-model="addData.comAddress"
                autocomplete="off"
                placeholder="例如：青年公寓333号"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="addDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="add"
              >保 存</el-button
            >
          </div>
        </el-dialog>

        <!-- 编辑的弹出框 -->
        <el-dialog title="编辑小区" :visible.sync="editDialog">
          <el-form :model="editData">
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="小区编号"
              >
                <el-input
                  disabled
                  v-model="editData.comNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="小区名称">
                <el-input
                  v-model="editData.comName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item label="详细地址">
              <el-input
                v-model="editData.comAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="editDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="edit"
              >保 存</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Page from "../components/projectCom/Page";
export default {
  components: { Page },
  data() {
    return {
      page: 1,
      count: 3,
      total: 1,
      addDialog: false,
      editDialog: false,
      id: "",
      name: "",
      tableData: [],
      addData: {
        comAddress: "",
        comName: "",
        comNum: "",
      },
      editData: {},
    };
  },
  methods: {
    binChart: function () {
      var myChart = echarts.init(this.$refs.bin);
      var option;
      setTimeout(function () {
        option = {
          title: { text: "个别小区人数变化情况" },
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: [
              ["product", "2017", "2018", "2019", "2020", "2021", "2022"],
              ["成都智慧小区", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["恐龙小区", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["祥龙小区", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["青年公寓333号", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { left: "5%", top: "30%", width: "40%", height: "50%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "40%",
              center: ["74%", "55%"],
              emphasis: {
                focus: "self",
              },
              label: {
                formatter: "{b}: {@2017} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2017",
                tooltip: "2017",
              },
            },
          ],
        };
        myChart.on("updateAxisPointer", function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });
        myChart.setOption(option);
      });
      option && myChart.setOption(option);
    },
    iChart() {
      var myChart = echarts.init(this.$refs.BC);
      var option;
      const data = [];
      for (let i = 0; i <= 100; i++) {
        let theta = (i / 100) * 360;
        let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
        data.push([r, theta]);
      }
      option = {
        title: {
          text: "个性小区规划",
        },
        legend: {
          data: ["line"],
        },
        polar: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        angleAxis: {
          type: "value",
          startAngle: 0,
        },
        radiusAxis: {},
        series: [
          {
            coordinateSystem: "polar",
            // name: "line",
            type: "line",
            data: data,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    fn1(val) {
      this.page = 1;
      this.count = val;
      this.getData();
    },
    fn(val) {
      this.page = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/smart/community/list",
        method: "post",
        params: {
          pageNum: this.page,
          pageSize: this.count,
        },
        data: {
          comName: this.name,
          comNum: this.id,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.tableData = data.pageInfo.list;
          this.total = data.pageInfo.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    reset: function () {
      this.id = "";
      this.name = "";
      this.getData();
    },
    search: function () {
      this.getData();
    },
    add: function () {
      this.$axios({
        url: "/smart/community/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    deleteRow(row) {
      console.log(row);
      this.$axios({
        url: "/smart/community/del/" + row,
        method: "DELETE",
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    handleEdit(row) {
      let editData = { ...row };
      this.editData = editData;
    },
    edit: function () {
      this.$axios({
        url: "/smart/community/edit",
        method: "put",
        data: this.editData,
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.$message.success("修改成功");
          this.editDialog = false;
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    blurFn() {
      this.$axios({
        url: "/smart/community/judgeOne",
        method: "get",
        params: {
          communityNum: this.addData.comNum,
        },
      }).then(({ data }) => {
        if (data.code == "B0001") {
          this.$message.error("编码重复了，请重新输入");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.binChart();
    this.iChart();
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 95%;
  margin: 20px 20px 0px 20px;
  .toper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-bottom: 20px;
      color: #333333;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .headerECharts {
      width: 100%;
      height: 200px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #myChart {
        height: 100%;
        width: 65%;
      }
      #binChart {
        height: 100%;
        width: 35%;
      }
    }
    .header {
      width: 100%;
      height: 80px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input {
        width: 200px;
        margin: 10px;
      }
      .el-dialog {
        width: 35%;
      }
    }
    .btnColor {
      background-color: #0bb197;
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
    .addBox {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
    }
    .reset {
      background-color: white;
      color: #c0c4cc;
      border: 1px solid #c0c4cc;
    }
    .reset:hover {
      color: #0bb197;
    }

    .body {
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;
      .bodyHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          color: #3c4145;
          margin: 20px 0px 0px 20px;
          font-weight: bold;
        }
        .el-button {
          margin: 20px 20px 0px 20px;
        }
      }
      .el-pagination {
        margin: 20px 10px 50px 0px;
        text-align: right;
      }
    }
  }
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
</style>
